<template>
 

   
      <div id="centerBottomChart" style="width:15vw; height: 400px;"></div>
 
   
   
  
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.draw();
    this.charTimg();
  },
  mixins: [echartMixins],
  methods: {
    charTimg() {
      setInterval(() => {
        this.draw();
      }, 6000);
    },
    draw() {
      // 基于准备好的dom，初始化echarts实例
       let w = document.documentElement.clientWidth / 100;
      
      let t = this;
      this.chart = this.$echarts.init(document.getElementById("centerBottomChart"));
      //  ----------------------------------------------------------------
       let Data = ['15日', '16日' ];
        
       
 
      let Data1 = [ 620, 532];
      
       
 
      let option= {
        title: {
          text: "波动率",
          left: '45%',
          top: 'bottom',
          textAlign: 'center',
          textStyle: {
            color: "#B4B4B4",
            fontSize: w,
            fontWeight: "normal"
          }
        },
         grid: {
          left: 10,
          right:10,
         
        },

        xAxis: {
          type: 'category',
          
          
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          data: Data
        },

        yAxis: [
          {
            splitLine: { show: false },
            show:false 
            
          }
        ],
        series: [
          {
            name: 'bar',
            type: 'bar',
           
            itemStyle: {
              color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(32,248,255,50)'},
                
                { offset: 1, color: 'rgba(32,248,255,0)' }
              ])
            },
            label: {
                    show: true,
                    textStyle : {
                         color: "#fff",
                         fontSize : w                      
                    },
            },
                  
            data: Data1
          }
        ]
};

     
      

      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss">
#centerBottomChart {
  padding: 5px;
  margin-bottom: 5px;
  height: 300px;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    padding: 0.2rem;
    height: 30vh;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  } //下滑线动态
  .decoration2 {
    position: absolute;
    right: 0.125rem;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }
}
</style>